<template>
  <section>
    <div>
      <h2>设置<span style="color: #1d8ce0">{{rolename}}</span>权限</h2>
      <el-divider></el-divider>
    </div>
    <div class="card-body">
      <form method="post">
        <div class="table-responsive">
          <table class="table table-striped">
            <thead>
            <tr>
              <th>
                <label class="lyear-checkbox checkbox-primary">
                  <input name="checkbox" type="checkbox" id="check-all">
                  <span> 全选</span>
                </label>
              </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="p in permissionTree">
              <td>
                <label class="lyear-checkbox checkbox-primary">
                  <input name="rules[]" type="checkbox" v-model="selectedPermissionSns" class="checkbox-parent" :dataid="'id-'+p.id" :value="p.sn">
                  <span> {{p.name}}</span>
                </label>
                <br>
                <span class="p-l-30">
                      <label v-for="c in p.children" class="lyear-checkbox checkbox-inline checkbox-primary">
                          <input name="rules[]" type="checkbox" v-model="selectedPermissionSns" class="checkbox-parent checkbox-child" :dataid="'id-'+p.id+'-'+c.id" :value="c.sn">
                          <span> {{c.name}}</span>
                      </label>
                  </span>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <el-button size="success" @click="this.addRolePermission">授权</el-button>
        <el-button size="danger" onclick="javascript:window.close();">取消</el-button>
      </form>
    </div>
  </section>
</template>
<script type="text/javascript">
$(function(){
  //动态选择框，上下级选中状态变化
  $('.card-body').on('change','input.checkbox-parent', function(){
    var dataid = $(this).attr("dataid");
    $('input[dataid^=' + dataid + '-]').prop('checked', $(this).is(':checked'));
  });
  $('.card-body').on('change','input.checkbox-child', function(){
    var dataid = $(this).attr("dataid");
    dataid = dataid.substring(0, dataid.lastIndexOf("-"));
    var parent = $('input[dataid=' + dataid + ']');
    if($(this).is(':checked')){
      parent.prop('checked', true);
      //循环到顶级
      while(dataid.lastIndexOf("-") != 2){
        dataid = dataid.substring(0, dataid.lastIndexOf("-"));
        parent = $('input[dataid=' + dataid + ']');
        parent.prop('checked', true);
      }
    }else{
      //父级
      if($('input[dataid^=' + dataid + '-]:checked').length == 0){
        parent.prop('checked', false);
        //循环到顶级
        while(dataid.lastIndexOf("-") != 2){
          dataid = dataid.substring(0, dataid.lastIndexOf("-"));
          parent = $('input[dataid=' + dataid + ']');
          if($('input[dataid^=' + dataid + '-]:checked').length == 0){
            parent.prop('checked', false);
          }
        }
      }
    }
  });
});
</script>
<script type="text/javascript">
export default {
  data() {
    return {
      //分页相关
      id: null,
      rolename: '',
      permissionTree:[], //一个现实说有权限
      selectedPermissionSns:[] //回显权限
    }
  },
  methods: {
    addRolePermission(){
      //角色id和选择权限sn
      let role = {id:this.id,permissions:[]};
      this.selectedPermissionSns.forEach(function (sn,index){
        let permission = {"sn":sn};
        role.permissions[index] = permission;
      });
      //发起授权请求
      this.$http.post("/role/authorize",role)
          .then(result=>{
            result = result.data; //{sucess:true,messge:jfjfjjf}  AjaxResult
            if (result)
            {
              alert("授权成功！")
              window.close();
            }else{
              alert(result.message);
            }

            //关闭对话框
            $("#roleDialog").modal("hide");
          })
          .catch(result=>{
            console.log(result);
            alert("系统错误！")
          })
    },
    getRoleAndPermissonSns(){
      this.$http.get("/role/permission/"+this.id)
          .then(result=>{
            result = result.data;
            this.role = result.role;
            this.selectedPermissionSns = result.permissionSns;
          })
          .catch(result=>{
            console.log(result);
            alert("系统异常!")
          })
    },
    getPermissionTree(){
      this.$http.get("/permission/tree")
          .then(result=>{
            this.permissionTree = result.data;
          })
          .catch(result=>{
            console.log(result);
            alert("系统异常!")
          })
    }
  },
  mounted() {
    this.getPermissionTree();
    this.id = this.$route.query.roleid;
    this.rolename = this.$route.query.rolename;
    this.getRoleAndPermissonSns();
  }
}
</script>
